<!--
 * @Author: chenhaoran
 * @Date: 2025-04-05 13:32:31
 * @LastEditors: chenhaoran
 * @LastEditTime: 2025-04-05 15:19:05
-->
<template>
  <div class="pipeline-flow__main">
    <div class="pipeline-flow">
      <div class="pipeline-flow__sidebar">sidebar</div>
      <div class="pipeline-flow__content">
        <div class="flow-groups-container flow-groups-container--capsule">
          <FlowGroup></FlowGroup>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import FlowGroup from './components/FlowGroup.vue'
</script>
<style lang="scss" scoped>
.pipeline-flow__main {
  border-top: 1px solid #e0e0e0;
  // width: 100%;
  // height: 100%;
  height: calc(100% - 56px);
  margin-top: 56px;
  overflow: hidden;
  .pipeline-flow {
    display: flex;
    // width: 100%;
    height: 100%;
    overflow-x: auto;
    &__sidebar {
      display: inline-block;
      max-height: calc(100vh - 56px);
      max-width: 300px;
      min-width: 300px;
      overflow-y: auto;
      padding: 19px;
      vertical-align: top;
    }
    &__content {
      background:#f2f5f7;
      display: inline-block;
      max-height: calc(100vh - 56px);
      vertical-align: top;
      .flow-groups-container {
        height: 100%;
      }
    }
  }
}
</style>